import React from 'react';
import { Image } from 'antd';
import { useSelector } from 'react-redux';
import type { RootState } from '../store';
import './Logo.css';

interface LogoProps {
  size?: 'small' | 'medium' | 'large';
  showText?: boolean;
  animated?: boolean;
  className?: string;
}

const Logo: React.FC<LogoProps> = ({ 
  size = 'medium', 
  showText = true, 
  animated = true,
  className = ''
}) => {
  const themeMode = useSelector((state: RootState) => state.theme.mode);
  const isDark = themeMode === 'dark';

  const sizeMap = {
    small: { icon: 24, text: 14 },
    medium: { icon: 32, text: 16 },
    large: { icon: 48, text: 20 }
  };

  const currentSize = sizeMap[size];

  return (
    <div className={`logo-container ${animated ? 'animated' : ''} ${className}`}>
      <div className="logo-icon">
        <Image
          width={currentSize.icon}
          height={currentSize.icon}
          src="/logo.svg"
          fallback=""
          alt="Logo"
          className="logo-image"
          preview={false}
        />
        {animated && <div className="logo-glow" />}
      </div>
      {showText && (
        <div className="logo-text" style={{ fontSize: currentSize.text }}>
          <span className="logo-title">数字人</span>
          <span className="logo-subtitle">管理系统</span>
        </div>
      )}
    </div>
  );
};

export default Logo; 